<template>
  <div class="orderItem">
    <img :src="order.images" alt="">
    <div>
      <p>{{ order.orderId }}</p>
      <p>{{ order.totalPrice }}</p>
      <p>{{ ["待核销","已核销","已取消","待支付","待分配"][order.state] }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Order-Item",
  props:["order"]
}
</script>

<style scoped lang="less">
.orderItem{
  height: 80px;
  border: solid 2px black;
  line-height: 80px;
  display: flex;
  justify-content: flex-start;
  margin-top: 5px;
  cursor: pointer;
  background-color: #FFFFFF;

  img{
    width: 13%;
  }
  div{
    width: 75%;
    display: flex;
    justify-content: flex-start;
    margin-left: 12%;
    p{
      width: 35%;}
  }

  &:hover{
    background-color: #FFFF00;
  }
}
</style>